// 钩子函数封装，所有组件数据都要懒加载，就封装成一个函数方便使用的时候调用
import { useIntersectionObserver,useIntervalFn } from "@vueuse/core"
import { ref } from 'vue'
import dayjs from "dayjs"

export const useLazyFn = (apiFn) =>{
    // 后台数据容器
    const result = ref([])
    // 目标dom容器
    const target = ref(null)
    const {stop} = useIntersectionObserver(
        // 绑定元素
        target,
        // 判断isIntersecting为true就停止观察，然后掉用接口获取数据
        ([{isIntersecting}],useElement)=>{
            if(isIntersecting){
                stop()
                apiFn().then(data=>{
                    result.value = data.result
                })
            }
        },
        {
            // 处理产品区域需要滚动比较多才能去加载数据的问题
            threshold: 0
        }
    )
    return {
        result,target
    }
} 
export const usePayTime = () => {
    let time = ref(0)
    let timeText = ref('')
    const {pause,resume} = useIntervalFn(()=>{
        time.value--
        timeText.value = dayjs.unix(time.value).format('mm分ss秒')
        if(time.value < 0 && time.value === 0){
            pause()
        }
    },1000,false)
    const start = (countTime) => {
        time.value = countTime
        timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    }
    return {start,timeText}
}
